<template>
    <div id="network_id" class="network" style="height:800px"></div>
</template>
<script>
    import Vis from 'vis'
    export default {
        name: 'result',
        components: {},
        data() {
            return {
                nodes:[],
                edges:[],
                container:null,
                nodesArray:[
                    {id: 0, label: "0", group: 0},
                    {id: 1, label: "1", group: 0},
                    {id: 2, label: "2", group: 0},
                    {id: 3, label: "3", group: 1},
                    {id: 4, label: "4", group: 1},
                    {id: 5, label: "5", group: 1},
                    {id: 6, label: "6", group: 2},
                    {id: 7, label: "7", group: 2},
                    {id: 8, label: "8", group: 2},
                    {id: 9, label: "9", group: 3},
                    {id: 10, label: "10", group: 3},
                    {id: 11, label: "11", group: 3},
                    {id: 12, label: "12", group: 4},
                    {id: 13, label: "13", group: 4},
                    {id: 14, label: "14", group: 4},
                    {id: 15, label: "15", group: 5},
                    {id: 16, label: "16", group: 5},
                    {id: 17, label: "17", group: 5},
                    {id: 18, label: "18", group: 6},
                    {id: 19, label: "19", group: 6},
                    {id: 20, label: "20", group: 6},
                    {id: 21, label: "21", group: 7},
                    {id: 22, label: "22", group: 7},
                    {id: 23, label: "23", group: 7},
                    {id: 24, label: "24", group: 8},
                    {id: 25, label: "25", group: 8},
                    {id: 26, label: "26", group: 8},
                    {id: 27, label: "27", group: 9},
                    {id: 28, label: "28", group: 9},
                    {id: 29, label: "29", group: 9}
                ],

                edgesArray:[
                    {from: 1, to: 0,label:"hahah"},
                    {from: 2, to: 0},
                    {from: 4, to: 3},
                    {from: 5, to: 4},
                    {from: 4, to: 0},
                    {from: 7, to: 6},
                    {from: 8, to: 7},
                    {from: 7, to: 0},
                    {from: 10, to: 9},
                    {from: 11, to: 10},
                    {from: 10, to: 4},
                    {from: 13, to: 12},
                    {from: 14, to: 13},
                    {from: 13, to: 0},
                    {from: 16, to: 15},
                    {from: 17, to: 15},
                    {from: 15, to: 10},
                    {from: 19, to: 18},
                    {from: 20, to: 19},
                    {from: 19, to: 4},
                    {from: 22, to: 21},
                    {from: 23, to: 22},
                    {from: 22, to: 13},
                    {from: 25, to: 24},
                    {from: 26, to: 25},
                    {from: 25, to: 7},
                    {from: 28, to: 27},
                    {from: 29, to: 28},
                    {from: 28, to: 0}
                ],

                options:{},

                data:{}

            }
        },
        mounted() {
            this.init();
            this.network.on("click", function (params) {
                params.event = "[original event]";
                document.getElementById('eventSpan').innerHTML = '<h2>Click event:</h2>' + JSON.stringify(params, null, 4);
                console.log('click event, getNodeAt returns: ' + this.getNodeAt(params.pointer.DOM));
            });

  /*          var hiddenProperty = 'hidden' in document ? 'hidden' :
                'webkitHidden' in document ? 'webkitHidden' :
                    'mozHidden' in document ? 'mozHidden' :
                        null;
            var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
            var onVisibilityChange = function(){
                if (!document[hiddenProperty]) {
                    alert('页面非激活');
                }else{
                    alert('页面激活')
                }
            }
            document.addEventListener(visibilityChangeEvent, onVisibilityChange);*/

        },
        beforeRouteLeave(to, form, next) {
            next()
        },
        methods: {
            init() {
                let this_ = this;
                this_.nodes = new Vis.DataSet(this_.nodesArray);
                this_.edges = new Vis.DataSet(this_.edgesArray);
                this_.container = document.getElementById('network_id');
                this_.data = {
                    nodes: this_.nodes,
                    edges: this_.edges

                };

                this_.options = {
                    autoResize: true,
                    groups:{
                        useDefaultGroups: true,
                        myGroupId:{
                            /*node options*/
                        }
                    },

                    nodes: {
                        shape: 'dot',
                        size: 30,
                        font: {
                            size: 32,
                        },
                        borderWidth: 2

                    },

                    edges: {
                        width: 2,
                        smooth:{  //设置两个节点之前的连线的状态
                            enabled: false  //默认是true，设置为false之后，两个节点之前的连线始终为直线，不会出现贝塞尔曲线
                        }

                    },

                    physics: { //计算节点之前斥力，进行自动排列的属性
                        enabled: true, //默认是true，设置为false后，节点将不会自动改变，拖动谁谁动。不影响其他的节点
                        barnesHut: {
                            gravitationalConstant: -4000,
                            centralGravity: 0.3,
                            springLength: 120,
                            springConstant: 0.04,
                            damping: 0.09,
                            avoidOverlap: 0
                        }

                    },

                    interaction:{
                        dragNodes: true, //是否能拖动节点
                        dragView: true, //是否能拖动画布
                        hover: true, //鼠标移过后加粗该节点和连接线
                        multiselect: true, //按 ctrl 多选
                        selectable: true, //是否可以点击选择
                        selectConnectedEdges: true, //选择节点后是否显示连接线
                        hoverConnectedEdges: true, //鼠标滑动节点后是否显示连接线
                        zoomView: true //是否能缩放画布

                    },

                    manipulation: {  //该属性表示可以编辑，出现编辑操作按钮
                        enabled: true
                    }
                };
                this_.network = new Vis.Network(this_.container, this_.data, this_.options);

            },

            resetAllNodes() {
                let this_ = this;
                this_.nodes.clear();
                this_.edges.clear();
                this_.nodes.add(this_.nodesArray);
                this_.edges.add(this_.edgesArray);
                this_.data = {
                    nodes: this_.nodes,
                    edges: this_.edges
                };
                this_.network = new Vis.Network(this_.container, this_.data, this_.options);

            },

            resetAllNodesStabilize() {
                let this_ = this;
                this_.resetAllNodes();
                this_.network.stabilize();
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>
